<template>
  <div class="register">
    <div class="title">
      <a href="/login">登录</a>
      <span>·</span>
      <a class="active" href="/register">注册</a>
    </div>
    <div class="Login">
			<label class="LoginName">Sign</label>
			<el-form :model="RegisterVo" :rules="rules" ref="RegisterVo" class="demo-ruleForm">
        <el-form-item label="名称" prop="nickname" class="item">
          <input type="text" v-model="RegisterVo.nickname"  />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile" class="item">
          <input type="text" v-model="RegisterVo.mobile"  />
        </el-form-item>
				<el-form-item label="密码" prop="password" class="item">
				  <input type="password" v-model="RegisterVo.password"  />
				</el-form-item>
        <el-form-item label="确认密码" prop="checkPass" class="item" >
          <input type="password" v-model="checkPass" @change="Confirm" />
        </el-form-item>
				<div class="btn" @click="submitForm" >submit
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</div>
			</el-form>
		</div>
     
  </div>
</template>

<script>
  import {register} from '~/http'
   import '~/assets/css/sign.css'
   import '~/assets/css/register.css'
  export default{
    layout: 'sign',
    data(){
      return {
          RegisterVo:{},
          checkPass:"",
          ischeckPass:false,
          rules:{
            nickname:[

                { required: true, message: '请输入名称', trigger: 'change' }

            ],
            mobile:[
               { required: true, message: '请输入手机号', trigger: 'change' },
               { pattern:/^\d{11}$/, message: '手机号11位', trigger: 'change' }
            ],
            password:[
                { required: true, message: '请输入密码', trigger: 'change' },
                { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'change' }
            ],
          }
      }
    },

    created() {

    },
    methods:{
      submitForm(){
        console.log(1212)
          if(!this.ischeckPass){return false}
          this.$refs.RegisterVo.validate(val=>{
            if(val){
              register(this.RegisterVo).then(res=>{
                console.log(res.data)
                if(res.data.token){
                  this.$notify({
                    title: '注册',
                    message: '这是一条成功的提示消息',
                    type: 'success'
                  });
                  this.$router.push("/login")
                }
              })
            }else{
              return false
              
            }
          })
      },
      Confirm(){
          console.log(this.checkPass == this.RegisterVo.password)
          this.ischeckPass = this.checkPass == this.RegisterVo.password
          if(!this.ischeckPass){
             this.$message.error('两次密码不一样');

          }
      },

    }
  }
</script>
